<!DOCTYPE html>
<html>
<head>
    <title>CSS Compressor</title>
    <!--
    <link rel="Stylesheet" href="CSScompressor-single.css" type="text/css" />
    -->
     <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
   <meta content="Compress CSS" name="description" />
<meta content="compress CSS, CSS compressor" name="keywords" />
<script type="text/javascript" src="file:///C|/Projects/CSS Compressor/CSScompressor-single.js" ></script>
</head>
<body >
<div class="bottom">
  <div class="header">
    <h2>CSS Compressor </h2> 
    <h4 class="subtt">Compress CSS, find and remove unused class</h4>
  </div>

<STYLE type="text/css">
.retxt{
	WIDTH:575PX;
	HEIGHT:200PX;
	MIN-WIDTH:575PX;
	MAX-WIDTH:700PX;
	MIN-HEIGHT:200PX;
	MAX-HEIGHT:350PX;
	DISPLAY:INLINE-BLOCK;
	BACKGROUND:#222;
	BORDER:2PX SOLID #222;
	BORDER-RADIUS:12PX;
	BOX-SHADOW:0 0 12PX #BBB;
	color:#fff;
	font:normal 12px Verdana;
	line-height:18px;
	padding:10px 5px 5px 15px;
}
.retxt:FOCUS{
	BACKGROUND:#EEE;
	COLOR:#000;
	BORDER:2PX SOLID #222;
	BOX-SHADOW:0 0 12PX #FFF;	
}
.BOXAREA{
    MARGIN:20PX AUTO;
	PADDING:10PX 10PX; 
	BACKGROUND:#777;
	BORDER:1PX SOLID #EEE;
	BOX-SHADOW:0 0 4PX #000;
	BORDER-RADIUS:20PX;
	DISPLAY:INLINE-BLOCK;	WIDTH:600PX;
}
.BOXAREA UL,.BOXAREA LI{
	LIST-STYLE:NONE;
	PADDING:0;
	MARGIN:0 0 10PX;
}
.BOXAREA UL{
	MARGIN:0PX 0 10PX 10PX;
}
.BOXAREA LI{
	FLOAT:LEFT;
	MARGIN:10PX 2PX 0;
}
.clik,.BOXAREA LI A{
	FONT:BOLD 14PX Serif;
	PADDING:0 8PX;
	BACKGROUND:#aaa;
	COLOR:#0FF;
	BORDER:1PX inset #EEE;
	TEXT-DECORATION:NONE;
	BORDER-RADIUS:4PX;
	text-shadow:0 0 5px #000;
}
.clik:focus,.BOXAREA LI A:focus{color:red;}
.clik{color:#fff;cursor:pointer;}
.BOXAREA2{
	PADDING:20PX 10PX;
	BACKGROUND:GREEN;
	WIDTH:600PX;
}
H5{text-shadow:0px 0px 4px #000;FLOAT:RIGHT;COLOR:#FFF;MARGIN:10PX 0PX 10PX 20PX;PADDING:0;FONT:BOLD 14PX ARIAL;}
.len{WIDTH:80PX;FLOAT:LEFT;MARGIN:11PX 10PX 0;PADDING:0;color:#0cf;font-weight:bold;}
.lt{float:left;disp;ay:inline-block;MARGIN:12px 0 0;PADDING:1px;color:#fff;font-weight:bold;}
.oValue{background:red;margin-left:20px;}
.action{margin:5px 0 0 20px;font:bold 16px Arial;color:red;padding:2px 4px 0;width:80px;border:1px solid #000;border-radius:6px;background:#0CF;text-align:center;box-shadow:0 0 5px #fff;cursor:pointer;}
.clik{}
.clr{clear:both;}
</STYLE>


        <div id="tabco8" CLASS="BOXAREA">
		  <ul>
            <li><a href="javascript:vd()">Input</a></li>
            <li><a href="javascript:vd()">Result</a></li>
            <!--<li><a href="javascript:vd()">about</a></li> -->   
		  </ul>
        <div CLASS="BOXAREA">
    	  <H5>Enter your css into the box!</H5>
          <form><input class="clik" onclick="javascript:this.form.area_1.focus();this.form.area_1.select();" value="Select All" type="button"/>
    	    <textarea id="q" class="retxt" name='area_1'></textarea></form>
<BR/>
          <div class="action" onclick="doit()">Compress</div>
        </div>
        <div class="oValue">
        <form><input class="clik" onclick="javascript:this.form.area_2.focus();this.form.area_2.select();" value="Select All" type="button"/>
          <textarea id="re" class="retxt" name='area_2'></textarea> 
        </form>     
      	  <div class="wp">
            <div class="lt">
              <div >Before</div>
            </div>
            <div class="rt">
              <div id="olen" class="len"></div>
            </div>
          </div>
     	  <div class="wp">
            <div class="lt">
              <div>After</div>
            </div>
            <div class="rt">
              <div id="clen" class="len"></div>
            </div>
          </div>
    	  <div class="wp">
            <div class="lt">
              <div>Rate</div>
            </div>
            <div class="rt">
              <div id="crate" class="len"></div>
            </div>
          </div>
    	<div class="clr"></div>
      </div>
      <div><br/>
       <h4>What does the tool work?</h4>
       <ul class="ab">
        <li>Remove the white space</li>
    	<li>Remove the comment enclosed in \*  *\</li>
    	<li>Merge the class. Foe example, .hh{margin:0px}, .hh{width:10px} will be merged into .hh{margin:0px,width:10px}. But .hh li{float:left} or 
    .hh, dd{float:left} will not be merged. </li>
    	<li>Find and remove the unused class and id in CSS (optional). Without considering the class or id names in &lt;pre&gt; &lt;/pre&gt; tag or other text area.</li>
    	<li>Shortcut margin and padding. For example, {margin-top:10px; margin-right:20px; margin-bottom:5px;margin-left:20px} is simplifed to {margin: 10px 20px 5px 20px}</li>
      </ul>
    </div>
  </div>
           



  <div class="footer"><br /><br /><a href="javascript:socialbkmk()">Social Bookmark</a> if the tool is useful. <br />Last updated on March.1, 2009<br /> www.pagecolumn.com<br />
  </div>
</div>     

</body>
</html>


